<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #code {
            display: inline-block;
            width: 60px;
            line-height: 30px;
            text-align: center;
            background-color: #eee;
            letter-spacing: 2px;
            font-style: italic;
            font-weight: bold;
        }
    </style>
</head>
<body>

    <h2>表单验证</h2>
    <p>
        <label for="">请输入用户名</label>
        <input id="username" type="text" placeholder="用户名">
        <!-- <span>用户名是由数字，字母组成，且数字不能开头，长度必须是4-8位</span> -->
        <span id="userSpan">用户名错误</span>
    </p>
    <p>
        <label for="">请输入密码</label>
        <input type="password" placeholder="密码">
        <!-- <span>密码是由数字，字母组成长度必须是6-12位</span> -->
        <span id="pwdSpan">密码错误</span>
    </p>

    <p>
        <label for="">请输入手机号</label>
        <input type="text" placeholder="手机号">
        <!-- <span>手机号是11位</span> -->
        <span id="pwdSpan">手机号错误错误</span>
    </p>

    <p>
        <label for="">请输入验证码</label>
        <input type="text">
        <span id="code">1234</span>
        <span id="codeSpan">验证码错误</span>
    </p>

    <button id="btn">提交</button>


    <script>

        // 获取相关的对象
        var oUser = document.getElementById('username') ;
        var oUserSpan = document.getElementById('userSpan') ;

        // 获取按钮
        var oBtn = document.getElementById('btn') ;


        var smallArr = [] ;
        for(var i = 97 ; i <= 122 ; i++) {
            var s = String.fromCharCode(i) ;
            smallArr.push(s) ;
        }
        console.log(smallArr);

        var bigArr = [] ;
        for(var i = 65 ; i <= 90 ; i++) {
            var s = String.fromCharCode(i) ;
            bigArr.push(s) ;
        }
        console.log(bigArr);


        var numArr = [] ;
        for(var i = 0 ; i < 10 ; i++) {
            numArr.push(i + '') ;
        }
        console.log(numArr);


        var allArr = smallArr.concat(bigArr , numArr);

        console.log(allArr);



        // 绑定点击事件
        oBtn.onclick = function() {
            // alert(1);  // 测试

            // 验证用户名
            var user = oUser.value ;   // 获取输入框的值
            console.log(user) ;
            // 1 用户名不能为空
            if(user === '') {
                oUserSpan.innerHTML = '用户名不能位空' ;
                oUserSpan.style.color = 'red';
                return ;
            }

            // 2 验证长度
            if(user.length < 4 || user.length > 8) {
                oUserSpan.innerHTML = '用户名长度必须是4-8位' ;
                oUserSpan.style.color = 'red';
                return ;
            }

            // 3 数字不能开头
            //     第一位是数字
            // if(user[0] >= 0 && user[0] <= 9)
            if(!isNaN(user[0])) {
                oUserSpan.innerHTML = '用户名不能数字开头' ;
                oUserSpan.style.color = 'red';
                return ;
            }

            // 4 格式：必须是字母+数字组成
            //    思路：把所有的合法的内容存入数组  allArr
            //      需要把用户名的每一个字符拿出来判断  --- 
            for(var i in user) {
                if(!allArr.includes(user[i])) {
                    oUserSpan.innerHTML = '用户名只能由字母和数字组成' ;
                    oUserSpan.style.color = 'red';
                    return ;
                }
            }


            // 验证通过
            oUserSpan.innerHTML = '√';
            oUserSpan.style.color = 'green';


            // 验证密码
            //   。。。 正常验证

            //   密码的强弱验证   
            //    1112343   aaaaddd    AAADFF  包含1中 弱
            //    123sfsf 包含两种  中
            //    1ddAA1  包含三种  安全

            // 
        }

    </script>
    
</body>
</html>